<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <!-- 步骤1：引入Vue.js、Element Plus、Axios、Mock.js、api.js、app.js、style.css -->
  <!-- import Vue  -->
  <script src="https://unpkg.com/vue"></script>
  <!-- 引入vue -->
  <!-- 引入vue-router -->
  <!-- import Element Plus CSS  -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">

  <!-- import Element Plus JavaScript  -->
  <script src="https://unpkg.com/element-plus"></script>

  <!-- import Axios  -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- import Mock.js  -->
  <script src="http://mockjs.com/dist/mock.js"></script>

  <!-- 步骤2：封装前后端交互接口  -->
  <script type="module" src="./js/api.js"></script>
  <!-- 步骤3：完成api.js -->
  <!-- 步骤4：通过组件方式构建主应用，引入app组件 -->
  <script type="module" src="./js/app.js"></script>
  <!-- 步骤9：完成app.js -->
  <!-- 步骤8：引入样式文件 -->
  <link rel="stylesheet" href="./CSS/style.css">
  <title>东软饭店</title>
</head>

<body>
  <div id="app">
    <!-- 步骤4：通过组件方式构建主应用，引入app组件 -->


    <Myapp />
  </div>
</body>


<script type="module">
  // console.log("欢迎使用东软点餐系统");
  // 步骤4：通过组件方式构建主应用，引入app组件
  import Myapp from './js/app.js';
  // 步骤3：引入api.js
  import api from './js/api.js';
  import './js/myMock.js';
  // 步骤6：创建Vue.js根组件
  const App = {
    // 步骤6：创建data数据(变量)
    // 知识点：Vue3 在data()方法中定义数据
    data() {
      return {
        message: "欢迎使用东软点餐系统",
      }
    },

    // 步骤6：注册主组件(组件名：Myapp)
    // 知识点：Vue3 在components选项中注册组件
    components: {
      Myapp
    }
  };

  // 步骤6：创建Vue.js根组件
  // 知识点：Vue3 通过 Vue.createApp() 方法创建根组件
  const app = Vue.createApp(App);

  // 步骤7：使用Element Plus UI库
  // 知识点：Vue3 通过 app.use() 方法使用插件
  app.use(ElementPlus);

  // 步骤6：挂载Vue.js根组件
  // 知识点：Vue3 通过 app.mount() 方法挂载根组件
  app.mount("#app");
</script>

</html>